<template>
  <div v-show="show" class="menu_Box">
    <!-- 数据传递 第一步模板上创建的点击方法 传入的值是数据的type -->
    <button class="userTypeButton z-[2]" v-for="item in userType" :key="item.type" @click="event.onClick(item.type);">
      {{ item.button }}
    </button>
    <!-- 遮罩 点击传递事件名 -->
    <div class="mask z-[1] fixed m-auto inset-0 w-full h-full" @click="$emit('cancel')" />
  </div>
</template>

<script setup lang="ts">
const props = defineProps({
  menlock: {
    type: Boolean,
    default: false,
  },
  show: {
    type: Boolean,
    default: false,
  },
  userId: {
    type: String,
    default: '',
  },
});

// 向上传递事件（子向父传递）
const emits = defineEmits<{ (e: "selectMenu", type: number): void; (e: "cancel"): void }>();

const userType = [
  { button: '潜 在', type: 0 },
  { button: '意 向', type: 1 },
  { button: '成 交', type: 2 },
  { button: '黑 单', type: 3 },
];

const event = {
  // 第二步 点击方法： 接收type 类型是number 传递到父组件 事件名为‘selectMenu’ ,传递的值为type 这是模板上传递的值
  onClick(type: number) {
    emits('selectMenu', type);
  },
};
</script>

<style>
.menu_Box {
  position: absolute;
  right: 30%;
  top: 70px;
  border: 1px solid #ffa257;
  display: flex;
  border-radius: 0px 0px 5px 5px;
  z-index: 50;
  box-sizing: border-box;
  padding: 5px;
  flex-direction: column;
  background-color: #f8f8f8;
  color: #ffa257;
  font-size: 20px;
}

.userTypeButton {
  border: 1px solid #ffa257;
  padding: 5px 20px;
}
</style>
